import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'
import { lazy } from 'ice'
import { useMemoizedFn, useCreation } from 'ahooks'
import BIMTitleDom from './components/BIMTitleDom'
import store from '@/store'
import styles from './index.module.scss'

const TreeDom = lazy(() => import('@/components/TreeDom'))

const BIM = ({ addBIM, updateBIMName, deleteBIMs }, ref) => {
  const [graphState] = store.useModel('graph')
  const { bim, stage } = graphState

  const [treeType] = useState('bim')

  const roomTreeRef = useRef()
  const apartmentTreeRef = useRef()
  const separatorTreeRef = useRef()

  const createKeyTitle = useMemoizedFn(
    ({ name, fatherId, treeKey, idToEye, onlyToEye, setEye, getCheckedKeys, getKeyToId, getIdToKey }) => {
      return (
        <BIMTitleDom
          name={name}
          idToEye={idToEye}
          onlyToEye={onlyToEye}
          setEye={setEye}
          addBIM={() => addBIM({ type: name, fatherId })}
          deleteBIMs={() => {
            const checkedKeys = getCheckedKeys()
            const keyToId = getKeyToId()
            const idToKey = getIdToKey()
            const ids = checkedKeys
              .map(key => keyToId[key])
              .map(id => bim.docs[id])
              .filter(
                doc =>
                  !!doc &&
                  doc.definition === name &&
                  idToKey[doc.id].substring(0, idToKey[doc.id].lastIndexOf('-')) === treeKey
              )
              .map(i => i.id)
            deleteBIMs({ ids, type: name, fatherId })
          }}
        />
      )
    }
  )

  useImperativeHandle(ref, () => ({
    setEye: arg => {
      const { ids: roomIds, keys: roomKeys } = roomTreeRef.current.setEye(arg)
      const { ids: apartmentIds, keys: apartmentKeys } = apartmentTreeRef.current.setEye(arg)
      const { ids: separatorIds, keys: separatorKeys } = separatorTreeRef.current.setEye(arg)
      return { ids: [...roomIds, ...apartmentIds, ...separatorIds], keys: { ...roomKeys, ...apartmentKeys, ...separatorKeys } }
    }
  }))

  const initObjArr = useCreation(
    () => [
      {
        bim: {
          room: { window: {}, mainwall: {}, drywall: {}, beam: {}, column: {}, door: {}, scanstation: {} }
        }
      },
      {
        bim: {
          apartment: {
            room: { window: {}, mainwall: {}, drywall: {}, beam: {}, column: {}, door: {}, scanstation: {} }
          }
        }
      },
      {
        bim: {
          scanstation: {}
        }
      },
      {
        bim: {
          separator: {}
        }
      }
    ],
    []
  )

  return (
    <div className={styles.BIM}>
      <div className={styles.annotation}>
        <span>请依次添加&nbsp;&nbsp;房间&nbsp;&nbsp;和&nbsp;&nbsp;户型</span>
      </div>
      <div className={styles.tree}>
        <div style={{ width: '100%', height: '100%', overflow: 'auto' }}>
          {!stage.includes('concrete') ? (
            <>
              <TreeDom
                ref={roomTreeRef}
                treeType={treeType}
                createKeyTitle={createKeyTitle}
                initObj={initObjArr[0]}
                updateBIMName={updateBIMName}
              />
              <div style={{ width: '100%', height: '2px', backgroundColor: '#2e3440', margin: '2px 0px 2px 0px' }} />
              <TreeDom
                ref={apartmentTreeRef}
                treeType={treeType}
                createKeyTitle={createKeyTitle}
                initObj={initObjArr[1]}
                updateBIMName={updateBIMName}
              />
              <div style={{ width: '100%', height: '2px', backgroundColor: '#2e3440', margin: '2px 0px 2px 0px' }} />
              <TreeDom
                ref={separatorTreeRef}
                treeType={treeType}
                createKeyTitle={createKeyTitle}
                initObj={initObjArr[3]}
                updateBIMName={updateBIMName}
              />
            </>
          ) : (
            <TreeDom
              ref={roomTreeRef}
              treeType={treeType}
              createKeyTitle={createKeyTitle}
              initObj={initObjArr[2]}
              updateBIMName={updateBIMName}
            />
          )}
        </div>
      </div>
    </div>
  )
}

export default forwardRef(BIM)
